<template>
    <div id="titlebar" class="" v-on:click="onclick">
        <div class="ui secondary menu">
            <a class="item">
                <i class="icons">
                    <i class="inverted yellow big thin circle icon"></i>
                    <i class="inverted purple user icon"></i>
                </i>
                <div id="logo">
                    <h3> 钉钉</h3>
                </div>
            </a>
            <div class="right menu">
                <div class="item">
                    <div class="ui icon input">
                        <input type="text" placeholder="搜索">
                        <i class="search link icon"></i>
                    </div>
                </div>
                <a class="ui item">
                    <i class="small inverted window minimize icon"></i>
                </a>
                <a class="ui item">
                    <i class="small inverted window restore icon"></i>
                </a>
                <a class="ui item">
                    <i class="inverted close link icon"></i>
                </a>
            </div>
        </div>
    </div>
</template>

<script>
  // import $ from 'jquery'

  export default {
    name: 'titlebar',
    data () {
      return {
        title: '这是标题栏'
      }
    },
    methods: {
      onclick: function (e) {
        console.log('onclicked')
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    #titlebar {
        background-color: #398DEE;
        width: 100%;
        height: auto;
        text-align: left;
        padding-left: 20px;
        vertical-align: middle;
        line-height: 40px;
    }

    #logo {
        vertical-align: middle;
        display: table-cell;
        text-align: center;
        color: white;
    }

    .menu > .item {
        background-color: transparent;
    }
</style>
